<template>
  <div style="padding: 0.5rem 0 3rem">
    <van-form @submit="onSubmit" @failed="onFailed" :show-error-message="false">
      <!-- <template v-if="tpl.city_data">
				<label>城市</label>
				<div style="margin-bottom: 16px">
					<city-list :tpl="tpl" show-active @select="selectCity" />
				</div>
			</template> -->
      <label>姓名</label>
      <van-field v-model.trim="form.name" placeholder="姓名" />
      <label class="required">手机号</label>
      <van-field
        v-model.trim="form.mobile"
        type="tel"
        placeholder="手机号"
        maxlength="11"
        :rules="[
          { required: true, message: '请填手机号' },
          { pattern: /^[1][3-9][0-9]{9}$/, message: '手机号格式不正确' },
        ]"
      />
      <div style="margin: 16px">
        <van-button
          round
          block
          color="#ff7400"
          native-type="submit"
          :loading="saving"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import behavior from "@/mixins/behavior";
import dayjs from "dayjs";

export default {
  mixins: [behavior],
  components: {},
  metaInfo() {
    return {
      title: "完善信息",
    };
  },
  data() {
    let now = dayjs();

    return {
      appointDate: {
        min: now.add(1, "d").toDate(),
        max: now.add(30, "d").toDate(),
      },
      form: {
        name: "",
        mobile: "",
        city: "",
        address: "",
        appoint_date: "",
      },
      tpl: {},
      saving: false,
    };
  },
  created() {
    const { tg_id, tg_type } = this.$route.query;

    this.getTplInfo(tg_id, tg_type);
  },
  methods: {
    selectCity(v) {
      this.form.city = v;
    },
    openAppointDate() {
      this.$refs.datePicker.open();
    },
    appointDateConfirm(v) {
      this.form.appoint_date = dayjs(v).format("YYYY-MM-DD");
    },
    // 表单错误
    onFailed({ errors }) {
      this.$toast({
        message: errors[0].message,
        position: "top",
      });
    },
    async onSubmit() {
      const { query } = this.$route;
      let toast = this.$toast.loading();
      const { name, mobile, city, address, ...args } = this.form;

      let form = {
        ...query,
        name,
        mobile,
        city,
        address,
        data_set: JSON.stringify(args),
      };
      // if (!form.city) {
      // 	this.$toast({
      // 		message: "请选择城市",
      // 		position: "top"
      // 	});
      // 	return;
      // }
      this.saving = true;
      await this.$api[query.form_pay == 2 ? "adDataSubmit" : "adSubmit"](
        form
      ).catch((err) => {
        toast.clear();
        this.$toast(err);
        this.saving = false;
        throw err;
      });
      this.saving = false;
      toast.clear();
      // this.$toast("提交成功，请等待面膜送到您的收货地址");
      // this.$toast("预约成功");
      this.$router.replace({
        path: "/pay/success1",
        query,
      });
      // this.close();
    },
  },
};
</script>
<style lang="scss">
#copyright {
  display: none;
}
</style>
<style lang="scss" scoped>
.section-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  .title {
    margin: 0 0.1777777rem;
    font-size: 0.44444rem;
    font-weight: bold;
  }
  .separator {
    width: 0.888888rem;
    height: 1px;
    background: #000;
    transform: scaleY(0.5);
  }
}
label {
  font-size: 14px;
  color: #666;
  position: relative;
  padding-left: 16px;
  &.required::after {
    content: "*";
    position: absolute;
    left: 8px;
    top: 0;
    color: red;
  }
  span {
    color: #888;
    font-size: 12px;
  }
}
::v-deep .van-cell {
  margin-bottom: 16px;
  &::after {
    border-bottom-color: #e0e0e0;
  }
}
</style>
